<template>
  <div class="douyin-live">
    <h2>抖音直播间数据可视化</h2>
    <div class="charts-container">
      <div class="chart" ref="audienceChart"></div>
      <div class="chart" ref="danmuChart"></div>
      <div class="chart" ref="giftChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DouyinLive',
  data() {
    return {
      audienceData: [],
      danmuData: [],
      giftData: [],
    };
  },
  mounted() {
    this.initCharts();
    this.simulateData();
  },
  methods: {
    initCharts() {
      this.audienceChart = echarts.init(this.$refs.audienceChart);
      this.danmuChart = echarts.init(this.$refs.danmuChart);
      this.giftChart = echarts.init(this.$refs.giftChart);

      this.updateAudienceChart();
      this.updateDanmuChart();
      this.updateGiftChart();
    },
    simulateData() {
      // 模拟实时数据更新
      setInterval(() => {
        this.audienceData.push(Math.floor(Math.random() * 1000) + 500);
        this.danmuData.push(Math.floor(Math.random() * 500) + 100);
        this.giftData.push(Math.floor(Math.random() * 2000) + 500);

        if (this.audienceData.length > 10) this.audienceData.shift();
        if (this.danmuData.length > 10) this.danmuData.shift();
        if (this.giftData.length > 10) this.giftData.shift();

        this.updateAudienceChart();
        this.updateDanmuChart();
        this.updateGiftChart();
      }, 2000);
    },
    updateAudienceChart() {
      const option = {
        title: { text: '实时观众数' },
        tooltip: {},
        xAxis: { data: Array.from({ length: this.audienceData.length }, (_, i) => `T-${i}`) },
        yAxis: {},
        series: [{ name: '观众数', type: 'line', data: this.audienceData }],
      };
      this.audienceChart.setOption(option);
    },
    updateDanmuChart() {
      const option = {
        title: { text: '弹幕热度' },
        tooltip: {},
        xAxis: { data: Array.from({ length: this.danmuData.length }, (_, i) => `T-${i}`) },
        yAxis: {},
        series: [{ name: '弹幕数', type: 'bar', data: this.danmuData }],
      };
      this.danmuChart.setOption(option);
    },
    updateGiftChart() {
      const option = {
        title: { text: '礼物收入' },
        tooltip: {},
        xAxis: { data: Array.from({ length: this.giftData.length }, (_, i) => `T-${i}`) },
        yAxis: {},
        series: [{ name: '礼物收入', type: 'line', data: this.giftData }],
      };
      this.giftChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.douyin-live {
  padding: 20px;
}
.charts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.chart {
  flex: 1 1 300px;
  height: 300px;
  background: #f9f9f9;
  border: 1px solid #ddd;
}
</style>